<template>
  <ContentWrap
    class="cursor-pointer card-item bg-[var(--app-content-bg-color)]! dark:bg-[var(--el-bg-color)]!"
    :class="{ 'card-item-active': isActive }"
  >
    <el-row :gutter="10">
      <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
        <div class="flex justify-center pos-relative">
          <el-image
            :fit="'fill'"
            :src="user.avatar ? user.avatar : 'https://assets2.meton.vip/images/avatar_female.png'"
          />
          <Icon
            :icon="user.sex == 1 ? 'svg-icon:nan' : 'svg-icon:nvxing'"
            :color="user.sex == 1 ? 'blue' : 'pink'"
            class="pos-absolute! right-0 bottom-0"
          />
        </div>
      </el-col>
      <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
        <div class="!h-full flex flex-col justify-center">
          <div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-text
                  :title="user.employeeName"
                  truncated
                  class="custom-text-20 w-80px! c-[#11192d]! .dark:c-[#fff]!"
                >
                  {{ user.employeeName }}
                </el-text>
              </div>

              <div class="flex items-center">
                <el-text class="custom-text-16" truncated>{{ user.employeeId }} </el-text>
              </div>
            </div>
          </div>
          <div class="flex justify-between items-center mt-10px">
            <el-text class="custom-text-16" truncated>
              {{ user.job }}
            </el-text>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="flex flex-grow items-center mt-10px">
          <el-input-number v-model="userProportion" class="!w-100%" :min="0" />
        </div>
      </el-col>
    </el-row>

    <!-- <div class="flex items-center">
      <div class="pos-relative">
        <el-image
          class="w-[48px] h-[48px] rounded-4px align-middle"
          :src="user.avatar ? user.avatar : 'https://assets2.meton.vip/images/avatar_female.png'"
        />
      </div>

      <div class="ml-10px flex-grow">
        <div class="mb-10px custom-text-14 flex items-center">
          <el-text truncated> {{ user.employeeName }} </el-text>
          <el-divider direction="vertical" />
          <el-text truncated> {{ user.job }} </el-text>
        </div>
        <div>({{ user.id }}) </div>
      </div>
    </div>
    <div class="flex flex-grow items-center mt-10px">
      <el-input-number v-model="userProportion" class="!w-100%" :min="0" />
    </div> -->
  </ContentWrap>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'UserCard' })
const props = defineProps({
  user: propTypes.object.def({
    avatar: 'https://assets2.meton.vip/images/avatar_female.png',
    nickname: '姓名|昵称',
    sex: 0,
    mobile: '18888888888',
    shop: '门店',
    employee: '员工',
    tiemToShop: 'xxx',
    id: '123456'
  }),
  proportion: propTypes.number.def(0),
  isActive: propTypes.bool.def(false)
})
const emit = defineEmits(['update:proportion'])
const userProportion = computed({
  get() {
    return props.proportion
  },
  set(val) {
    console.log(val)
    // 触发 update:proportion 事件，
    emit('update:proportion', val)
  }
})
</script>
<style lang="scss" scoped>
.card-item {
  border: 1px solid transparent !important;

  &:hover {
    border: 1px solid var(--el-color-primary) !important;
    background: var(--el-color-primary-light-9) !important;
  }
  &-active {
    border: 1px solid var(--el-color-primary) !important;
    background: var(--el-color-primary-light-8) !important;
  }
}
:deep(.el-image) {
  border-radius: 4px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
</style>
